<template>
	<swiper class="swiper" :indicator-dots="indicatorDots" :circular="true" :style="{height: windowHeight + 'px'}">
		<swiper-item>
			<image :style="{height: windowHeight + 'px'}" src="../../static/imgs/start01.png" mode=""></image>
		</swiper-item>
		<swiper-item>
			<image :style="{height: windowHeight + 'px'}" src="../../static/imgs/start02.png" mode=""></image>
		</swiper-item>
		<swiper-item class="last">
			<view @tap="toindex" class="btn" hover-class="hover-transform1">{{getLang == 1 ? '立即体验' : 'Experience'}}</view>
			<image :style="{height: windowHeight + 'px'}" src="../../static/imgs/start03.png" mode=""></image>
		</swiper-item>
	</swiper>
</template>

<script>
	import {pageto} from "@/common/js/util.js"
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				windowHeight: 0
			}
		},
		computed: {
			...mapGetters([
				'getLang'
			])
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			toindex() {
				pageto('/pages/new-login/new-login')
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 750upx;
		swiper-item {
			width: 750upx;
			image {
				width: 100%;
			}
		}
	}
	.last {
		position: relative;
		.btn {
			position: absolute;
			left: 50%;
			top: 68%;
			transform: translateX(-50%);
			border: 1px solid rgba($color: #ffffff, $alpha: .5);
			background-color: rgba($color: #ffffff, $alpha: .1);
			width: 320upx;
			height: 80upx;
			border-radius: 80upx;
			text-align: center;
			line-height: 80upx;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: bold;
			transition: all .2s linear;
		}
	}
	.hover-transform1 {
		opacity: .96;
		transform: scale(.85);
	}
</style>
